let _Vue


class KRouter {
    constructor(options) {
        console.dir(_Vue)
        const { mode, routes } = options
        this.mode = mode
        const { rouMap, rouList } = createRouterMap(routes ?? [])
        const initial = window.location.hash.slice(1) || '/'
        this.routeMap = rouMap
        this.routeList = rouList
        _Vue.util.defineReactive(this, 'current', initial)
        window.addEventListener('hashchange', () => {
            this.current = window.location.hash.slice(1) || '/'
        })
        window.addEventListener('load', () => {
            this.current = window.location.hash.slice(1) || '/'
        })

    }
}

KRouter.install = function (Vue) {
    _Vue = Vue
    Vue.mixin({
        beforeCreate() {
            // 判断当前根组件上是否存router
            if (this.$options.router) {
                // this 是 根组件本身
                this._routerRoot = this
                // 存在直接赋值给全局$router
                this.$router = this.$options.router
               

            } else {
                this._routerRoot = this.$parent && this.$parent._routerRoot
                // 子组件也要挂上$router
                this.$router = this._routerRoot.$router
            }
        }
    })
    Vue.component('router-view', {
        render(h) {
           
            const { routeMap, current } = this.$router
            let comp = null
            if (routeMap[current] && routeMap[current].parent) {
                let parent = routeMap[current].parent
                while (parent) {
                    console.log(1,parent===true)
                    comp = parent
                    parent = parent.parent
                }
               

            } else {
                comp = routeMap[current] || null
            }
            
            // 标记当前组件
            // data.routerView = true
            // let dep = 0
            // while (parent) {
            //     if (parent.$vnode && parent.$vnode.data.routerView) {
            //         dep++
            //     }
            //     parent = parent = parent.$parent
            // }

            return h(comp.component||null)
        }
    })
    Vue.component('router-link', {
        props: {
            to: {
                type: String,
                required: true,
            },
        },
        render(h) {
            return h('a', { attrs: { href: '#' + this.to } }, this.$slots.default)
        }
    })


}


// 初始化路由  处理路由缓存表
function createRouterMap(routes) {
    const rouMap = {}
    const rouList = []
    routes.forEach(router => {
        delayeringRouter(router, rouList, rouMap)
    })
    return { rouMap, rouList }
}

function delayeringRouter(route, pathList, pathMap, parent) {
    //    处理多级路由拼接
    const path = parent ? `${parent.path === '/' ? parent.path : parent.path + '/'}${route.path}` : route.path
    const { children, component } = route
    const str = {
        path,
        component,
        parent
    }

    if (!pathMap[path]) {
        pathMap[path] = str
        pathList.push(path)
    }
    if (children?.length > 0) {
        children.forEach(child => delayeringRouter(child, pathList, pathMap, str))
    }

}


export default KRouter